<template>
    <el-breadcrumb separator="/" class="breadcrumb-container">
      <transition-group name="breadcrumb">
        <!-- 可以跳转的路由 -->
        <el-breadcrumb-item
          v-for="(route, index) in breadcrumList"
          :to="{ path: route.path || '' }"
          :key="route.path"
          :class="{'no-redirect': index === breadcrumList.length - 1}"
        >{{ route.meta.title }}</el-breadcrumb-item>
        <!-- 不可跳转的路由 （最后一项是可以跳转的路由） -->
        <!-- <el-breadcrumb-item class="no-redirect">promotion detail</el-breadcrumb-item> -->
      </transition-group>
    </el-breadcrumb>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'
const breadcrumList = ref([])
const route = useRoute()
watch(route, (route) => {
  // 所有匹配到得路由
  const matchedList = route.matched
  // 在匹配到的路由中，我们过滤出可以跳转菜单的路由
  breadcrumList.value = matchedList.filter(item => item.meta && item.meta.title)
}, {
  immediate: true
})
</script>

<style lang="scss" scoped>
@import url(~@/assets/style/transition.scss);
.breadcrumb-container {
  height: 50px;
  line-height: 50px;
  float: left;
  margin-left: 10px;
  .no-redirect {
    ::v-deep {
      .el-breadcrumb__inner {
         color: #97a8be;
         cursor: text;
      }
    }
  }
}
</style>
